<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4.2.1.883/ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>

</head>
<body>
<script type="text/javascript">

   var mystore =  Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var mygrid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name', sortable:false, hideable:false},
            { text: 'Email', dataIndex: 'email', flex: 1 ,renderer:function (value) {
                return Ext.String.format('<a href="http://www.baidu.com">{0}</a>',value);
            }},
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
</script>
</body>
</html>